<template>
    <div class="main-container">
        <h2 class="title-label">长江卒中论坛学分注册信息核对表</h2>
        <yd-cell-group>
            <yd-cell-item>
                <span slot="left" class="label-text">身份证</span>
                <yd-input slot="right" v-model="signForm.idCard" placeholder="请输入身份证号"
                          :show-success-icon="false" :show-error-icon="false"
                          ref="idCard"
                          required regex="(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)"></yd-input>
            </yd-cell-item>

            <yd-cell-item>
                <span slot="left" class="label-text">姓名</span>
                <yd-input slot="right" v-model="signForm.name"
                          ref="name"
                          :show-success-icon="false" :show-error-icon="false"
                          placeholder="请输入姓名" required></yd-input>
            </yd-cell-item>
            <p slot="bottom" style="color:#F00;padding: 0.3rem;height: 15px;" v-html="result"></p>
        </yd-cell-group>
        <div class="button-container">
            <yd-button size="large"
                       :loading="loading"
                       @click.native="registerAction()"
                       loading-txt="正在注册中..." type="primary">提交注册
            </yd-button>
        </div>
    </div>
</template>

<script type="text/babel">
    import {signInByIdCard} from "@/api/sign";

    export default {
        data() {
            return {
                signForm: {
                    idCard: undefined,
                    name: undefined
                },
                loading: false,
                result: ""
            }
        },
        methods: {
            registerAction() {
                const idCardInput = this.$refs.idCard;
                const nameInput = this.$refs.name;

                if (!idCardInput.valid){
                    if (idCardInput.errorCode === 'NOT_NULL') {
                        this.result = '身份证信息不能为空';
                        return;
                    } else if (idCardInput.errorCode === 'NOT_REGEX_RULE') {
                        this.result = '身份证格式不正确';
                        return;
                    } else {
                        this.result = idCardInput.errorMsg;
                        return;
                    }
                }

                if (!nameInput.valid) {
                    if (nameInput.errorCode === 'NOT_NULL') {
                        this.result = '姓名不能为空';
                        return;
                    } else {
                        this.result = nameInput.errorMsg;
                        return;
                    }
                }

                if (idCardInput.valid && nameInput.valid) {
                    this.result = "";
                    this.loading = true;
                    signInByIdCard(this.signForm).then(res => {
                        this.loading = false;
                        this.$dialog.toast({
                            mes: '注册成功',
                            timeout: 2000,
                            icon: 'success',
                            callback: () => {
                                this.$router.push('/signIn/detail/' + res)
                            }
                        });
                    }).catch(err => {
                        this.loading = false;
                        this.$dialog.toast({
                            mes: err.message,
                            timeout: 1500,
                            icon: 'error'
                        });
                    })
                }
            }
        }
    }
</script>

<style scoped>
    .main-container {
        padding-top: 15px;
    }

    .button-container {
        margin: 0 30px;
    }

    .title-label {
        font-size: 20px;
        text-align: center;
        padding: 15px 0;
    }

    .label-text {
        width: 60px;
    }
</style>
